<template>

  <!--  使用子组件-->
  <tab-bar>
    <tab-bar-item path='/home' activeColor='#ff0000'>
      <template #item-icon>
        <van-icon size="30" name="home-o" />
      </template>
      <template #item-icon-active>
        <van-icon size="30" color="#ff0000" name="home-o" />
      </template>
      <template #item-text>
        <div class="titl">首页</div>
      </template>
    </tab-bar-item>

   <tab-bar-item path='/grid'>
      <template #item-icon>
        <van-icon size="30" name="apps-o" />
      </template>
      <template #item-icon-active>
        <van-icon size="30" color="#ff0000" name="apps-o" />
      </template>
      <template #item-text>
        <div class="titl">分类</div>
      </template>
    </tab-bar-item>

    <tab-bar-item path='/goods'>
      <template #item-icon>
        <van-icon size="30" name="shopping-cart-o" />
      </template>
      <template #item-icon-active>
        <van-icon size="30" color="#ff0000" name="shopping-cart-o" />
      </template>
      <template #item-text>
        <div class="titl">购物车</div>
      </template>
    </tab-bar-item>

    <tab-bar-item path='/user'>
      <template #item-icon>
        <van-icon size="30" name="user-o" />
      </template>
      <template #item-icon-active>
        <van-icon size="30" color="#ff0000" name="user-o" />
      </template>
      <template #item-text>
        <div class="titl">我的</div>
      </template>
    </tab-bar-item>

  </tab-bar>
</template>
<script>

// 导入组件
//尝试用路径别名
import TabBar from 'components/common/tabbar/TabBar'
import TabBarItem from 'components/common/tabbar/TabBarItem'


export default {
  name: "MainTabBar",
  components:{
    TabBar,
    TabBarItem
  }
}
</script>

<style>
  .titl{
    font-size: 30px;
  }
</style>
